<template>
    <div class="container">
      <div class="main-content">
        <!-- 表单-->
        <div class="form-container">
            <!--标签-->  
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <!-- 建立新的预约 -->
            <el-tab-pane label="新建预约" name="first">
              <el-steps :active="activeStep" align-center  finish-status="success">
                <el-step title="填写中" :icon="Edit" description="用户正在填写预约表单" />
                <el-step title="上传中" :icon="Upload" description="正在上传预约表单" />
                <el-step title="审查中" :icon="View" description="正在审查表单是否符合要求" />
                <el-step title="已完成" :icon="SuccessFilled" description="恭喜你完成预约" />
              </el-steps>
              <div class="section-title" style="margin-top: 20px;">预约登记</div>
              <el-form :model="form" :rules="rules" ref="formRef" label-width="80px" class="form-items">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="form.name" class="input" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                  <el-select v-model="form.sex" placeholder="请选择性别" style="width: 420px; height: 36px;">
                    <el-option label="男" value="1" />
                    <el-option label="女" value="0" />
                  </el-select>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                  <el-input v-model="form.phone" class="input" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="车牌号" prop="CarId">
                  <el-input maxlength="7" v-model="form.CarId" class="input" placeholder="请输入车牌号"></el-input>
                </el-form-item>
                <el-form-item label="来访目的" prop="purpose">
                  <el-select v-model="form.purpose" placeholder="请选择来访目的" style="width: 420px; height: 36px;">
                    <el-option label="中介看房" value="中介看房" />
                    <el-option label="搬家放行" value="搬家放行" />
                    <el-option label="送货上门" value="送货上门" />
                    <el-option label="来访探亲" value="来访探亲" />
                    <el-option label="家政服务" value="家政服务" />
                  </el-select>
                </el-form-item>
                <el-form-item label="来访时间" prop="visitTime">
                  <el-date-picker v-model="form.visitTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" placeholder="请选择来访时间" style="width: 420px; height: 36px;" />
                </el-form-item>
                <el-form-item>
                  <el-button type="danger" @click="submitForm" :disabled="!isFormComplete" style="width: 200px;">{{ submitButtonText }}</el-button>
                </el-form-item>
              </el-form>
                </el-tab-pane>  
            <!-- 查看预约情况 -->
            <el-tab-pane label="我的预约" name="second">
              <div class="history-title" style="margin-top: 20px;">预约历史</div>
              <el-table :data="tabelDate" style="width: 1000px; height: 500px; margin-left: 20%">
            <el-table-column prop="name" label="访客姓名" width="100px" />
            <el-table-column prop="type" label="来访目的" width="100" />
            <el-table-column prop="state" label="审核状态" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.state ? 'success' : 'danger'">
                  <div v-if="scope.row.state">已审核</div>
                  <div v-else>未审核</div>
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="time" label="来访时间" width="180" />
          </el-table>
            </el-tab-pane>  
          </el-tabs>  
        </div>
      </div>
    </div>
  <!-- 预约成功弹出提示 -->
    <el-dialog v-model="showSuccessDialog" title="预约成功" width="30%">
      <div>您的预约已经成功,可以正常来访。</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="resetForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { Path } from '@/constant';
  import { defineComponent, reactive, computed, ref } from 'vue'
  import { post,get } from '@/plugins/axios'
  //标签页
  const activeName = ref('first')
  const handleClick = (tab, event) => {
      console.log(tab, event)
  }
  const submitButtonText = ref("提交")

  const tabelDate = ref([])
  getTableDate()
  function getTableDate(){
    get(Path.visitorGetByUid,null,content => {
      tabelDate.value = content
    })
  }
  // 表单包含的数据
  const form = reactive({
    name: '',
    sex: '',
    phone: '',
    CarId: '',
    purpose: '',
    visitTime: ''
  })
  
  // 数据检验
  const rules = {
    name: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
    sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
    phone: [
      { required: true, message: '手机号不能为空', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确,号码为11位', trigger: 'blur' }
    ],
    CarId: [{ required: true, message: '请输入车牌号', trigger: 'blur' }],
    purpose: [{ required: true, message: '请选择来访目的', trigger: 'change' }],
    visitTime: [{ required: true, message: '请选择来访时间', trigger: 'change' }]
    
  }
  
  const formRef = ref(null)
  
  // 根据数据检验来改编按钮的内容以及是否可以被点击
  const isFormComplete = computed(() => {
    let isValid = true
    for (const key in rules) {
      if (rules[key].some(rule => rule.required && (form[key] === '' || form[key] === null))) {
        isValid = false
        break
      }
    }
    if (isValid) {
      submitButtonText.value = "提交"
    } else {
      submitButtonText.value = "请正确输入表单"
    }
    return isValid
  })
  // 设置步骤条的初始定位
  const activeStep = ref(1)
  // 初始化弹出提示
  const showSuccessDialog = ref(false)
  
  // 检验表单是否可提交
  const submitForm = () => {
    formRef.value.validate((valid) => {
      if (valid) {
        console.log('Form submitted:', form)
        activeStep.value = 2
        setTimeout(() => {
          activeStep.value = 3
          setTimeout(() => {
            // 表单提交
            // 等到登入模块加入后要去掉openId这个属性
            post(Path.visitorAdd,{
              name:form.name,
              sex:form.sex,
              phone:form.phone,
              carId:form.CarId,
              purpose:form.purpose,
              visitTimeValue:form.visitTime.getTime()
            },content => {
               activeStep.value = 4
               showSuccessDialog.value = true
               getTableDate()
            })
          }, 2000)
        }, 2000)
      } else {
        console.log('Form validation failed')
      }
    })
  }
  
  // 重置表单
  const resetForm = () => {
    // Reset the form
    submitButtonText.value = "请正确输入表单"
    formRef.value.resetFields()
    activeStep.value = 1
    showSuccessDialog.value = false
  }
  </script>
  
  <style scoped>
  .container {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
  }
  .section {
    padding: 10px 0;
    cursor: pointer;
  }
  
  .main-content {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* 预约表单标题样式 */
  .section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
  }
  /* 历史预约标题样式 */
  .history-title{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
  }

  /* 表单容器样式 */
  .form-container {
    width: 60%;
    height: auto;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 4px;
    margin-top: -250px;
  }
  /* 输入框样式 */
  .input {
    height: 36px;
    width: 420px;
    border-radius: 4px;
  }
  
  /* 表单样式 */
  .form-items {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* el-input框内部样式 */
  ::v-deep .el-input__wrapper {
    background-color: #f2f2f2;
    border-radius: 5px;
  }

  /* el-select框内部 */
  ::v-deep .el-select__wrapper {
    background-color: #f2f2f2;
    border-radius: 5px;
    height: 36px;
  }
  
  /* el-select框内部placeholder样式 */
  ::v-deep .el-select__placeholder.is-transparent {
    font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #191919;
  }
   /* el-input框内部placeholder样式 */
  ::v-deep .el-input__inner::placeholder {
    font-family: SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #191919;
  }

/* 标签页 */
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
  </style>